<template>
  <div class="bodys">
    <div class="content">
      <div class="title">
        <p>{{ queryList.title }}</p>
      </div>
      <div class="explain">
        <div>{{ queryList.creatorName }}</div>
        <div>{{ queryList.createTime }}</div>
        <div>{{ queryList.pageView }}浏览量</div>
      </div>
      <div class="content1" v-html="queryList.content"></div>
      <div class="bottom">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="comments" style="width:70%">
        </el-input>
        <div class="contentBtn">
          <el-button type="info" @click="addComments">评论</el-button>
        </div>
        <div style="margin-left:20px;margin-top:1rem;display: flex;" >
          <div @click="newslike(item)" style="display: flex;">
                <div v-if="queryList.isLike">
                  <img src="./../../assets/image/dianz.png" class="likeIcOn" alt="">
                </div>
                <div v-else>
                  <img src="./../../assets/image/weidianzhan.png" class="likeIcOn" alt="">
                </div>

          </div>
          <div style="margin-left:5px;margin-top:3px">
            {{queryList.supportNum}}
          </div>
        </div>
      </div>
      <div class="comment">
        <div class="status1">
          <div style="font-size:16px;margin-top: 5px;">{{ queryList.commentsNum }} 条评论</div>
          <div class="status1">
            <div v-for="(item, index) in items" :key="index" :class="[istrue == index ? 'isActive' : 'commentsNum']"
              @click="getActive(index)">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="commentList" style="margin:2rem 0;">
        <div v-for="item in commentList" :key="item.id" style="border-bottom:1px solid #f7f7f7;padding-top:10px">
          <div class="name">
            <img :src="item.avatar" alt="" />
            <p>{{ item.creatorName }}</p>
          </div>
          <div class="contentL">
            <p>{{ item.content }}</p>
          </div>
          <div style="display: flex; justify-content: space-between; margin: 10px 100px 10px 3rem;position: relative;" >
            <div class="time">
              {{ item.createTime }}
            </div>
            <div style="display: flex;">
              <!-- <div style="margin-right:13px" @click="deletes(item.id)">
                <span>
                  <img src="./../assets/images/dele.png" alt=""  class="likeIcOn" />
                  <span style="vertical-align: middle; color: #666;">删除</span>
                </span>
            </div> -->
              <div @click="islike(item)" style="display: flex;">
                <div v-if="item.isLike">
                  <img src="./../../assets/image/dianz.png" class="likeIcOn" alt="">
                </div>
                <div v-else>
                  <img src="./../../assets/image/weidianzhan.png" class="likeIcOn" alt="">
                </div>
              </div>
              <div style=" font-size:16px;position: absolute; top: 20%;right: -3%;">{{ item.supportNum }}
                </div>
            </div>
          </div>
        </div>
        <div class="more" style="text-align: center;margin-top: 2rem;" @click="load"> 
          <el-button type="info" style="padding:10px 40px;" v-if="finished">点击查看更多评论<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <p v-else>没有更多了</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { newsfindById, commentsFindPage,addComments ,commentsDeletes,supportComments,cancelComments,newsSupport,newsCancel} from "../../api/index";
export default {
  name: 'name',
  props: {

  },
  data () {
    return {
      query: {
        limit: 10,
        offset: 1,
        isComments:true,
        newId:this.$route.query.id
      },
      finished:true,
      commentList:[],
      istrue: 0,
      comments:'',
      queryList: '',
      items: [{ name: "点赞量" }, { name: "列表" }],
    };
  },
  components: {

  },

  methods: {
   async newslike(){
    if(this.queryList.isLike == false){
        let result = await newsSupport({id:this.$route.query.id})
        if(result.data.status == 100){
          this.$message.success('点赞成功')
          this.queryList.isLike = !this.queryList.isLike
          this.queryList.supportNum++
          this.getData()
        }
      }else{
        let result = await newsCancel({id:this.$route.query.id})
        if(result.data.status == 100){
          this.$message('取消成功')
          this.queryList.isLike = !this.queryList.isLike
          this.queryList.supportNum--
          this.getData()
          
        }
      }
    },
    async islike(item){
      if(item.isLike == false){
        let result = await supportComments({id:item.id})
        if(result.data.status == 100){
          this.$message('点赞成功')
          item.isLike=!item.isLike;
          item.supportNum++
          // this.commentsFindPage()
          this.$forceUpdate()
        }
      }else{
        let result = await cancelComments({id:item.id})
        if(result.data.status == 100){
          this.$message('取消成功')
          item.isLike=!item.isLike;
          item.supportNum--
          // this.commentsFindPage()
          this.$forceUpdate()
        }
      }
       
    },
    load(){
      setTimeout(() => {
        this.query.limit += 10;
        this.commentsFindPage();
      }, 1000);
    },
    async addComments(){
      if (this.comments.trim() == '') {
        return Toast('评论内容不能为空')
      }
       let result = await addComments({content:this.comments,newsId:this.$route.query.id,newsName:this.queryList.title})
       if(result.data.status ==100){
        // this.$emit('getCommentList')
        this.commentsFindPage()
        this.$message('评论成功')
        this.comments =''
       }
      
    },
    getActive (index) {
      index == 0 ?this.query.isComments=true:this.query.isComments= false
      this.istrue = index;
      this.commentsFindPage()
    },
    async getData () {
      let result = await newsfindById({ id: this.$route.query.id });
      if (result.data.status == 100)
      {
        
        result.data.data.content = result.data.data.content.replace("<video", `<video style="height:16rem;  margin: 0 15%;width:70%; object-fit:fill;" controls="controls;outline:none; autoplay=true controls="controls" webkit-playsinline="true" muted   playsinline="true""  `).replace("</video>", '</video>');
        this.queryList = result.data.data;
      }
    },
    async commentsFindPage () {
      let result = await commentsFindPage(this.query);
      if (result.data.status == 100)
      {
        result.data.data.comments.list.map(res => {
          res.createTime = res.createTime.split(' ')[0]
        })
        this.commentList = result.data.data.comments.list
        if (result.data.data.comments.total <= result.data.data.comments.list.length) {
            this.finished = false;
            // this.finishedText = '没有更多了'
          }
      }
    },
  },
  created () {
    this.getData()
    this.commentsFindPage()
  },
};
</script>
<style lang='scss' scoped>
.likeIcOn {
  width: 1.5rem;
  vertical-align: middle;
}
.contentL{
  margin: 10px 0px 0px 45px;
}
.name{
  display: flex;
  margin-left: 10px;
  
  img{
    width: 30px;
    height: 30px;
  }
  p{
    margin-left: 7px;
    margin-top: 5px;
  }
}
.commentsNum {
  width: 60px;
  height: 30px;
  background: #f5f5f5;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  border-radius: 4px;
 
}


.isActive {
  width: 60px;
  height: 30px;
  background: #e43937;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  border-radius: 4px;
  color: #fff;
}

.status1 {
  display: flex;
  justify-content: space-between;
}

.comment {
  margin: 1rem 1rem 0rem 1rem;
}

.content1 {
  padding: 2rem 0.9rem;
  word-wrap: break-word;
  table-layout: fixed;
  word-break: break-all;
  text-align: justify;
  white-space:normal;
}

.title {
  margin-top: 0rem;
  font-weight: 600;
  margin-left: 15px;

  p {
    font-size: 16px;
  }
}

.explain {
  display: flex;
  justify-content: space-between;
  margin: 15px;
  color: #999;
  font-size: 14px;
}

.bodys {
  // padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 1rem 15%;
  height: 100%;
  /* 父盒子有限高度 */
  overflow: auto;
  /* 溢出需要可滚动 */
  scrollbar-width: none;
  /* Firefox隐藏滚动条 */
  -ms-overflow-style: none;

  /* Internet Explorer 10+隐藏滚动条 */
  ::-webkit-scrollbar {
    width: 0;
    /* Safari,Chrome 隐藏滚动条 */
    height: 0;
    display: none;
  }

  // padding-bottom: 4rem;

}

.bottom {
  display: flex;
  padding: 2rem;
  background: #f8f8f8;
  
}

.contentBtn {
  // width: ;
  margin-top: 1rem;
  margin-left: 1rem;

}
</style>
